<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简单示例页面 | 2025-03-11</title>
    <style>
        /* 基础布局样式 */
        .container {
            width: 80%;
            margin: 0 auto;
        }
        header {
            background-color: #FFA500;
            padding: 20px;
            text-align: center;
        }
        nav {
            background-color: #FFD700;
            float: left;
            width: 20%;
            height: 300px;
            padding: 15px;
        }
        .content {
            float: left;
            width: 75%;
            padding: 20px;
            background-color: #EEE;
            min-height: 300px;
        }
        footer {
            clear: both;
            background-color: #FFA500;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>欢迎来到示例网站</h1>
        </header>

        <nav>
            <h3>导航菜单</h3>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>

        <main class="content">
            <h2>今日要闻</h2>
            <article>
                <p>这里是示例内容区域，可以展示文本、图片等多媒体元素。</p>
                <img src="https://via.placeholder.com/400x200" alt="示例图片">
                <p>通过语义化标签如&lt;article&gt;和&lt;section&gt;可以更好地组织内容结构。</p>
            </article>
        </main>

        <footer>
            <p>© 2025 示例公司 保留所有权利</p>
        </footer>
    </div>
</body>
</html>
